import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "mobx-react";
import { renderRoutes } from "react-router-config";
import { BrowserRouter } from "react-router-dom";
import { loadableReady } from '@loadable/component';

import { getStores } from "./store/store";
import routers from "./Routers";
import "antd/dist/antd.less";

const stores = getStores(false);

const RenderComponent = () => (
    <Provider {...stores}>
        <BrowserRouter>
            <div>
                { renderRoutes(routers) }
            </div>
        </BrowserRouter>
    </Provider>
);

loadableReady(() => {
    const root = document.getElementById("root");
    ReactDOM.hydrate(
        <RenderComponent />,
        root,
    );
});
